<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>


<script type="text/javascript" src="@{'/public/javascripts/jquery.js'}"></script> 
				<script type="text/javascript" src="@{'/public/javascripts/jquery.progressbar.min.js'}"></script> 
		<script>
			$(document).ready(function() {
				$("#spaceused1").progressBar();
				//$("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
				//$("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
				//$("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
			});
		</script>
		<style>
			* { font-family: Helvetica, Arial, Tahoma; font-size: 12px; font-color: #444; line-height: 25px; padding: 0px; margin: 0px; }
			a { text-decoration: none; color: #3366cc; }
			table { border-collapse: collapse; border: 0px; }
			table td { padding: 3px; }
			h2 { font-size: 16px; }
			pre { border: 1px dashed #ddd; color: #466; background-color: #eee; width: 100%; }
			
			#container { width: 80%; margin-left: 10%; margin-top: 30px;}
		</style>
		
		
		<div id="container">
			<div style="float: right; text-align: right; width: 300px;">download me at <a href="http://t.wits.sg">http://t.wits.sg</a></div>
			<div style="padding-bottom: 25px;">
				<h2>Progress Bars &amp; Controls</h2>
				<table>
					<tr><td>Plan Progress</td><td><span class="progressBar" id="spaceused1">0%</span></td></tr>
				
				</table>
				
				
				<strong>Choose your update %: </strong>
		
			           
			    <a href="#" onclick="setStatus(${plan.status})">lonk</a> |
							      <a href="#" onclick="setStatus(5)">5</a> |
			   	<a href="#" onclick="setStatus(10)">10</a> |
								<a href="#" onclick="setStatus(15)">15</a> |
				<a href="#" onclick="setStatus(20);">20</a> |
								<a href="#" onclick="setStatus(25)">25</a> |
				<a href="#" onclick="setStatus(30);">30</a> |
								<a href="#" onclick="setStatus(35)">35</a> |
				<a href="#" onclick="setStatus(40);">40</a> |
				                <a href="#" onclick="setStatus(45)">45</a> |
				<a href="#" onclick="setStatus(50);">50</a> |
				  				<a href="#" onclick="setStatus(55)">55</a> |
			 	<a href="#" onclick="setStatus(60)">60</a> |
			 					<a href="#" onclick="setStatus(65)">65</a> |
			 	<a href="#" onclick="setStatus(70)">70</a> |
			 					<a href="#" onclick="setStatus(75)">75</a> |
			 	<a href="#" onclick="setStatus(80)">80</a> |
			 					<a href="#" onclick="setStatus(85)">85</a> |
			  	<a href="#" onclick="setStatus(90)">90</a> |
			  					<a href="#" onclick="setStatus(10)">95</a> |
			  	<a href="#" onclick="setStatus(100)">100</a> |
			   
			   </div>
			<input type="hidden" value="1" id="planId"></input>
			
		
<script language="JavaScript" >

  function hello()

  {
	  
	  var myTextField = document.getElementById('clearance');
	  var answer = confirm ("Are you having fun?");
	  if (answer)
	  alert("Hello! "+name);
	  else
		  //alert ("Darn. Well, keep trying then.");
		  document.forms["myform"].submit();

  }
</script>

<style media="screen" type="text/css">
h90 {
font-size:14px;
color:white;
background:black;
}


h91{
font-size:21px;
color:white;

}

</style>
   
   
</head>
<body>


#{form @Application.updateStatus(plan.id)}
<p >
	<h3><label for="progress" >Just to update your STATUS!  </label></h3>

	<input type=text name="progress" id="itemDescription" /></input>
	
    <input type="submit" value="Update!" />
    <input hidden="true" id="planID" value='${plan.id}' ></input>
    
    	<input hidden="true" id="progress" value='${progress}' ></input>
</p>
#{/form}

<p></p>





 <script language="JavaScript" >

  function printReq()

  {
	  alert("sweeeeeeet");
	  
	  //for(var i=0;i<plan.requirements.size();i++){
		//  alert("<b>arr["+i+"] is </b>=>"+plan.requirements[i]+"<br>");
		  //document.forms["myform"].submit();

  }
</script>
 

   


#{form @Application.addReqs(plan.id)}
<p >
<h3><label for="req" >Just to add your plan REQUIREMENTS! </label></h3>
	
	<input type=text name="req" id="requirement" /></input>
		<input type=hidden name="" id="requirement" /></input>
	
    <input type="submit" value="Add!" />
    
    </p>
    #{/form}

 #{form @Application.removeRequirement(plan.id)}
<p >
<h3><label for="reqNo" >Just to remove a plan REQUIREMENT! </label></h3>
#{list items:plan.requirements, as:'requirement'}
${'requirement'}
#{/list}
<input hidden="true" id="planID" value='${plan.id}' ></input>
	<input hidden="false" id="planReq" value='${plan.requirements}' ></input>
	
	<input type=text name="reqNo" id="requirementNo" /></input>
	
    <input type="submit" value="Remove!"/>
   
    
    
    </p>
    #{/form}  
  



#{ifErrors}
   <h1>Oops…</h1>
 
   #{errors}
       <li>${error}</li>
   #{/errors}
   
#{/ifErrors}
    
    
#{form @Application.cleanRequirements(plan.id)}
<p >
    <input hidden="true" id="planID" value='${plan.id}' ></input>

	
    <input type="submit" value="Clean!"  id='clearance'/></input>


<h90><b>Warning</b>: pressing this will <h91>remove</h91> all your plan <b><i>requirements</i></b></h90>
    </p>
    </p>
    #{/form}
    
    
    
#{form @Application.showPlan(plan.id)}
<p >
<h3><label for="plan.id">Go back to the main Plan page</label></h3>
   <input type="submit" value="Go Back Now!" />
    </p>
#{/form}

<div>
				<h2>Usage: </h2>
				<pre>
	</pre>
			</div>


            
<!-- <form action = "@{Application.addReqs()}" method = get>
<input type = text name = string></input>
<input type = submit name = submit></input>
</form>  -->

</body>
</html>